import VoteFooter from "./VoteFooter";
import VoteMain from "./VoteMain";
import { connect } from "react-redux";

const Vote = function Vote(props) {
  let { supNum, oppNum } = props;
  return (
    <div
      style={{
        width: "500px",
        margin: "0 auto",
      }}
    >
      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
        }}
      >
        <span>React还不错</span>
        <span>{supNum + oppNum}人</span>
      </div>
      <VoteMain />
      <VoteFooter />
    </div>
  );
};

export default connect((state) => state.vote)(Vote);

/**
 * connect(mapStateToProps,mapDispatchToProps)(我们要渲染的组件)
 *  1、mapStateToProps ：可以获取到redux中的公共状态，把需要的信息作为属性，传递组件即可
 * connect(state=>{
 *   // state存储redux容器中，所有模块的公共状态信息
 *   // 返回对象中的信息，就是作为属性，传递给组件的信息
 *  return {
 *      supNum:state.vote.supNum
 *      info:state.personal.info
 *  }
 * })(Vote)
 *
 * 2、mapDispatchToProps ：把需要派发的任务，当做属性传递给组件
 * connect（null,dispatch=>{
 *  返回对象中的信息，会作为属性传递给组件
 * return{
 *      .....
 *  }
 * })(Vote)
 * 在connect内部有将actionCreator，变为mapDispatchToProps这样的模式的操作
 * 在redux内部有一个bindActionCreators这样的方法，可以进行转换
 */
